<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.flex {
				display: flex;
			}

			.flex-row {
				flex-direction: row;
			}

			.flex-column {
				flex-direction: column;
			}

			.flex-full {
				flex: 1;
			}

			.flex-wrap {
				flex-wrap: wrap;
			}

			.flex-center {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.flex-jc-start {
				justify-content: flex-start;
			}

			.flex-jc-end {
				justify-content: flex-end;
			}

			.flex-jc-center {
				justify-content: center;
			}

			.flex-jc-between {
				justify-content: space-between;
			}

			.flex-jc-around {
				justify-content: space-around;
			}

			.align-items-stretch {
				align-items: stretch;
			}

			.align-items-start {
				align-items: flex-start;
			}

			.align-items-end {
				align-items: flex-end;
			}

			.align-items-center {
				align-items: center;
			}

			.all {
				width: 1000px;
				height: 30px;
				margin: 100px auto;
				color: #fff;
				background: #666;
			}

			.a,
			.b,
			.c {
				padding-right: 30px;
				padding-left: 30px;
				margin-right: 30px;
				margin-left: 30px;
			}

			.a {
				width: 100px;
				height: 30px;
				background: red;
			}

			.b {
				width: 200px;
				height: 40px;
				background: green;
			}

			.c {
				width: 300px;
				height: 50px;
				background: blue;
			}

			/**
			 * css flex布局 —— 项目属性 flex-shrink
			 * https://blog.csdn.net/HH18700418030/article/details/127006977
			 * https://blog.csdn.net/ScottePerk/article/details/127169829
			 * https://blog.csdn.net/weixin_52350720/article/details/132865270
			 */
			.container {
				display: flex;
				margin: 0px auto;
				width: 650px;
				height: 100px;
				background-color: #e6e6e6;
			}

			.item {
				height: 50px;
			}

			.container div:nth-of-type(1) {
				flex-basis: 50px;
				flex-shrink: 0;
				background-color: coral;
			}

			.container div:nth-of-type(2) {
				flex-basis: 100px;
				flex-shrink: 1;
				background-color: lightblue;
			}

			.container div:nth-of-type(3) {
				flex-basis: 500px;
				flex-shrink: 2;
				background-color: khaki;
			}

			.container div:nth-of-type(4) {
				flex-basis: 300px;
				flex-shrink: 3;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="all flex flex-jc-around align-items-center">
			<div class="a"></div>
			<div class="b flex-center">flex-jc-around</div>
			<div class="c"></div>
		</div>

		<div class="all flex flex-jc-between align-items-stretch">
			<div class="a"></div>
			<div class="b flex flex-jc-center align-items-stretch">flex-jc-between</div>
			<div class="c"></div>
		</div>

		<div class="container">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
		</div>
	</body>
</html>